<script type="text/javascript">
$(window).load(function() {
	var $headerLogin = $("#headerLogin");
	var $headerRegister = $("#headerRegister");
	var $headerUsername = $("#headerUsername");
	var $headerLogout = $("#headerLogout");
	var $productSearchForm = $("#productSearchForm");
	var $keyword = $("#productSearchForm input");
	var defaultKeyword = "${message("shop.header.keyword")}";
	
	var username = getCookie("username");
	if (username != null) {
		$headerUsername.text("${message("shop.header.welcome")}, " + username).show();
		$headerLogout.show();
	} else {
		$headerLogin.show();
		$headerRegister.show();
	}
	
	$keyword.focus(function() {
		if ($keyword.val() == defaultKeyword) {
			$keyword.val("");
		}
	});
	
	$keyword.blur(function() {
		if ($keyword.val() == "") {
			$keyword.val(defaultKeyword);
		}
	});
	
	$productSearchForm.submit(function() {
		if ($.trim($keyword.val()) == "" || $keyword.val() == defaultKeyword) {
			return false;
		}
	});
    //菜单
    $(".menu-bar .nav-left").on("mouseover",function(){
    	$(this).children("ul").slideDown("linear");
    });
    $(".menu-bar .nav-left").on("mouseleave",function(){
    	$(this).children("ul").slideUp("linear");
    });
});
</script>
<div class="header">
	<div class="container search-logo-row">
		<div class="logo span5">
			<a href="${base}">
				<img src="${base}/resources/shop/images/766_logo.png" alt="766" />
			</a>
		</div>
		<div class="top_right span4">
		</div>
		<div class="search-row">
			<div class="search">
				<form id="productSearchForm" action="${base}/product/search.jhtml" method="get">
					<input name="keyword" class="keyword" placeholder="${productKeyword!message("shop.header.keyword")}" maxlength="30" />
					<button class="search_btn" type="submit">${message("shop.header.search")}</button>
				</form>
			</div>
			<div class="hotSearch">
				[#if setting.hotSearches?has_content]
					${message("shop.header.hotSearch")}:
					[#list setting.hotSearches as hotSearch]
						<a href="${base}/product/search.jhtml?keyword=${hotSearch?url}">${hotSearch}</a>
					[/#list]
				[/#if]
			</div>
		</div>
	</div>
	<div class="menu-bar container">
		<div class="nav-left">
			[#--智能家居商品分类--]
			<h2 class="left-nav-header">${message("shop.index.productCategory")}</h2>
			<ul>
				[@product_category_root_list count = 4]
					[#list productCategories as rootProductCategory]
						<li[#if !rootProductCategory_has_next] class="last"[/#if]>
							<a href="${base}${rootProductCategory.path}">${rootProductCategory.name}</a>
							<div class="nav-details">
								<ul>
									[#list rootProductCategory.children as productCategory]
										<li><a href="${base}${productCategory.path}">${productCategory.name}</a></li>
									[/#list]
								</ul>
							</div>
						</li>
					[/#list]
				[/@product_category_root_list]
			</ul>
		</div>
		<ul class="menu-nav clearfix">
			[#-- 导航条 --]
			[@navigation_list position = "middle"]
				[#list navigations as navigation]
					<li>
						<a href="${navigation.url}"[#if navigation.isBlankTarget] target="_blank"[/#if]>${navigation.name}</a>
					</li>
				[/#list]
			[/@navigation_list]
		</ul>
	</div>
</div>
